<template>
    <view class="z-box" :style="`padding-top:${BarNavHeight}px`">
        <u-navbar leftIcon="" title="吉林省土壤农产品采样平台" :title-style="NavCss" bgColor="#f9f9f9"></u-navbar>
        <view class="banner"></view>
        <u-grid :border="false" col="4">
            <u-grid-item>
                <view class="module" @click="() => toPage('/pages/map/map')">
                    <image src="/static/map.png" mode=""></image>
                    <text style="color: gray;">地图概览</text>
                </view>
            </u-grid-item>
            <u-grid-item>
                <view class="module" @click="() => toPage('/pages/cj-task/cj-task')">
                    <image src="/static/form.png" mode=""></image>
                    <text style="color: gray;">采样任务</text>
                </view>
            </u-grid-item>
            <u-grid-item>
                <view class="module" @click="() => toPage('/pages/feedback/feedback')">
                    <image src="/static/feedback.png" mode=""></image>
                    <text style="color: gray;">意见反馈</text>
                </view>
            </u-grid-item>
        </u-grid>
        <u-notify ref="notify"></u-notify>
    </view>
</template>
<script>
import LayoutMix from '@/mixins/layout-mix.js'

export default {
    mixins: [LayoutMix],
    methods: {
        toPage(url) {
            uni.navigateTo({
                url: url
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.z-box {
    .banner {
        width: 100vw;
        height: 56vw;
        background-image: url("@/static/index_top.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: 5vw;
    }

    .module {
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
            width: 10vw;
            height: 10vw;
        }
    }
}
</style>